<template>
  <div class="appwraper">
    <div class="relt" style="padding: 16.6vw 0; min-height: 200vh">
      <img src="static/imgs/bg.jpg" class="abs full" />
      <img src="static/imgs/title.png" class="relt" style="width: 80%" />
      <div class="ulist">
        <div v-for="(item, index) in players" :key="index" :class="{ uitem: true, voted: vote.includes(item.playerId) }">
          <img :src="`static/imgs/u${item.playerId}.png`" class="user" />
          <div class="vote">
            <p>
              <em>{{ item.voteNumber }}</em
              >票
            </p>
            <img src="static/imgs/btn1.png" class="vbtn btna" @click="voteBtn(item)" />
            <img src="static/imgs/btn2.png" class="vbtn btnb"/>
          </div>
        </div>
      </div>
    </div>

    <!--------------以下为公共定义区域------------------------------>
    <!-- 弹窗区域 S -->
    <transition name="fade">
      <PopUp :popVal="popVal" v-if="popVal" @close="closePopUp"></PopUp>
    </transition>
    <!-- 弹窗区域 E -->

    <!-- TIPS 区域 START -->
    <div class="fixed full" v-show="tipsBool" style="z-index: 99999">
      <transition name="slide">
        <div class="abs tipsView" v-show="tipsBool" id="tipsView" style="">
          <p class="tips" style="">{{ tipsWord }}</p>
        </div>
      </transition>
    </div>
    <!-- TIPS 区域 END -->
    <!-- 表单 区域 START-->
    <transition name="fade">
      <div v-show="formBool" class="maskView formView">
        <div class="fullPage flex"></div>
      </div>
    </transition>
    <!-- 表单 区域 END-->
    <!-- 音乐 区域 START -->
    <div v-show="playShow" :class="{ music: true, play: play }" @click="musicBtn"></div>
    <!-- 音乐 区域 END -->
    <!-- loadingView 区域 START -->
    <transition name="fade">
      <div class="loadingView cover" style="bacground-image: url('static/imgs/bg.jpg')" v-show="sVisible">
        <Loading type="larger"></Loading>
      </div>
    </transition>
    <!-- loadingView 区域 End -->
  </div>
</template>
<script>
//import html2canvas from 'static/js/html2canvas.js';
import ajaxService from 'service/service';
import utils from 'service/utils';
import Promise from 'promise';
import $ from 'jquery';
import vconsole from 'vconsole';
let debug = utils.getUrlParam('debug');
const channel = utils.getUrlParam('channel') || 1;
import baseCompent from 'service/baseCompent';
import wx from 'weixin-js-sdk';
window.wx = wx;
import 'jquery.transit';
export default {
  extends: baseCompent,
  data() {
    let that = this;
    return {
      players: [],
      popVal: 0 //0:不弹出，1:
    };
  },
  methods: {
    voteBtn(data) {
      let that = this;
      if (that.voting) return false;
      that.voting = true;
      ajaxService.vote({ playerId: data.playerId }).then((res) => {
        that.voting = false;
        that.hideTips();
        if (res.success) {
          that.initView(res.data);
          that.showTips('投票成功');
        } else {
          that.showTips(res.message);
        }
      });
      // this.showTips('投票成功');
    },
    popUpBtn(pval) {
      this.popVal = pval;
    },
    closePopUp(pval = 0) {
      this.popVal = pval;
    },
    startBtn() {
      this.slideToPage(1);
    },
    submitBtn() {
      let that = this;
      if (!that.name) {
        that.showTips('请输入姓名');
        return false;
      }
      /*if(that.name.gblen()>10){
                that.showTips('姓名长度过长');
                return false;
            }*/
      ajaxService.saveData().then((res) => {
        if (res.status != 1) {
          that.showTips(res.msg);
          return false;
        }
      });
    },
    formBtn() {
      this.formBool = true;
    },
    initView({ vote, players }) {
      this.vote = vote;
      this.players = players;
    }
  },
  mounted() {
    let that = this;
    this.$nextTick(function () {});
  },
  beforeCreate() {},
  created() {
    let that = this;
    //let ch = that.switchEN(qd);

    //let vConsole = new VConsole();
    if (debug) {
      let vs = new vconsole();
    }
    // if (process.env.NODE_ENV !== 'production') {
    //   setTimeout(function () {
    //     $(function () {
    //       that.startLoading();
    //     });
    //   });
    //   return false;
    // }
    let p1 = new Promise((resolve, reject) => {
      $(resolve);
    })
      .then(() => {
        //that.loadVideo();
      })
      .catch((e) => {
        console.info(e);
      });
    //ajaxService.getWxSign();
    var p2 = new Promise((resolve, reject) => {
      ajaxService.getInit().then(function (res) {
        resolve();
        that.initView(res.data);
        ajaxService.getWxSign();
      });
    }).catch((e) => {
      console.info(e);
    });
    Promise.all([p1, p2])
      .then(() => {
        that.startLoading();
        ajaxService.write({ type: 1, channel });
      })
      .catch((e) => {
        console.info(e);
      });
    /**/
  }
};
</script>

<style lang="less"></style>
